<template>
    <div>
         <we-header @showExtend="showExtend">通讯录</we-header>
        <!-- 顶部弹出框 -->
        <we-popup ref="upPopup" up>
           <down-list></down-list>
        </we-popup>
       <div class="contacts-wrapper">
            <div v-for="(item,index) in commonList" :key="index">
      <contacts-list :contactsData=item :line="commonList.length-1===index?false:true" @sendEvent='sendEvent'></contacts-list>
    </div>
    <van-index-bar>
  <div v-for="(item,index) in newFriendsList" :key="index">
    <div>
      <van-index-anchor :index="item.index" />
<div v-for="(item1,index1) in item.information" :key="index1">
    <van-cell value="" @click="toUserDetail(item1.F_FriendID)">
  <!-- 使用 title 插槽来自定义标题 -->
    <template #title >
     <van-image
            width="1.5rem"
            height="1.5rem"
            radius=".2rem"
            fit="cover"
            class="f-center"
            :src="item1.avatar"
            />
            <span class="name">{{item1.F_beizhu?item1.F_beizhu:item1.F_FriendNickname}}</span>
    </template>
  </van-cell>
</div>
    </div>
  </div>
</van-index-bar>
  <div class="count f-center van-hairline--top">
    {{friendCount}}位联系人
  </div>
       </div>
       <loading v-if="showLoading"></loading>
    </div>
</template>
<script>
import weHeader from './common/weHeader';
import wePopup from './common/wePopup';
import downList from './common/downList';
import contactsList from './common/contactsList'; 
import { apply, friends,image,user } from '../../api/collections/index';
import loading from './common/loading';
import {Meteor} from 'meteor/meteor';
var pinyin = require("pinyin");
export default {
    components:{
        weHeader,
        wePopup,
        downList,
        contactsList,
        loading
    },
    meteor: {
    $subscribe: {
      'userInf': []
    },
    friendsList(){
       let listArr = friends.find({F_UserID:this.id}).fetch()
       let newArr = []
       let index = 0
         listArr.forEach(e => {
           const avatar = image.findOne({_id:e.F_FriendAvatarId})
           if(avatar){
             e.avatar = avatar.base64
             const userInf = user.findOne({_id:e.F_FriendID})
             if(userInf){
            let check = e.F_beizhu?e.F_beizhu:userInf.nickname
            e.F_FriendNickname = userInf.nickname
         let fristName = pinyin(check, { style: pinyin.STYLE_NORMAL, heteronym: true })[0][0].substring(0, 1).toUpperCase();
          //进行判断，给原始json数据添加新的键值对
          if (this.indexList.includes(fristName) == true) { 
           if(newArr.some((item,i) =>{if(item.index == fristName){index=i;return true}})){
             newArr[index].information.push(e)
           }
           else{
             let arr = []
             arr.push(e)
             newArr.push({index:fristName,information:arr})
           }
          } else {
           if(newArr.some((item,i) =>{if(item.index == '#'){index=i;return true}})){
             newArr[index].information.push(e)
           }
           else{
             let arr = []
             arr.push(e)
             newArr.push({index:'#',information:arr})
           }
          }
             }
           }     
        });
       return newArr
    },
    applyListCount(){
      const list = apply.find({A_FriendID:this.id}).fetch()
      let count = 0
      if(list.length>0){
        list.forEach(e=>{
          if(e.A_Status!==0){
            count = count + 1
          }
        })
        if(count!==0){
          this.commonList[0].isTip = true
          this.commonList[0].count = count
        }
        else{
          this.commonList[0].isTip = false
          this.commonList[0].count = 0
        }
      }
    }
    },
    watch:{
      friendsList(){
        if(this.friendsList.length>0){
          this.newFriendsList=[...this.friendsList]
          this.newFriendsList.sort((item1,item2)=>{
            let val1 = item1.index
            let val2 = item2.index
            if (val1 < val2) {
              return -1;
          } else if (val1 > val2) {
              return 1;
          } else {
              return 0;
          }   
          })
        }
      }
    },
    computed:{
      friendCount(){
        let count = 0
        if(this.friendsList.length>0){
          this.friendsList.forEach(e=>{
            count = e.information.length + count
          })
          return count
        }
        else{
          return 0
        }
      }
    },
    methods:{
        showExtend(){
        this.$refs.upPopup.show()
    },
    sendEvent(e){
       switch(e){
         case 'newFriends':this.$router.push('/addList');break;
        default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
      }
    },
    toUserDetail(e){
      this.$router.push('/userBase/'+e)
    }
    },
    mounted(){
      this.showLoading = false
    },
    data(){
        return{
          showLoading:true,
          id:sessionStorage.getItem('user'),
      // 索引栏
      indexList:['*', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
      newFriendsList:[],
      // 通讯录公共列
      commonList:[
        {
        icon:'#icon-tongxunlu',
        name:'新的朋友',
        color:'#FA9E3B',
        isTip:false,
        count:0,
        event:'newFriends'
      },
      {
        icon:'#icon-qunliao',
        name:'群聊',
        color:'#07C160',
        isTip:false
      },
      {
        icon:'#icon-biaoqian',
        name:'标签',
        color:'#2781D7',
        isTip:false
      },
      {
        icon:'#icon-kequnguanli',
        name:'公众号',
        color:'#2781D7',
        isTip:false
      }
      ]
        }
    }
}
</script>
<style scoped>
.contacts-wrapper{
    margin-top: 1.5rem;
    background-color: #EDEDED;
}
.van-cell{
  padding: .3rem .4rem;
  line-height: 0;
}
.name{
  display: inline-block;
  position: relative;
  top: -.5rem;
  font-size: .6rem;
  left: .5rem;
}
.count{
  font-size: .6rem;
  color: #999;
  background-color: #fff;
  padding: .5rem;
}

</style>